<template>
  <div class="dispatch-data-container">
    <transition name="fade" mode="out-in">
      <div v-if="currentView === 'table'" class="data-table" key="table">
        <!-- 表格视图 -->
        <div class="table-header">
          <div class="header-cell">指标</div>
          <div class="header-cell">数值</div>
          <div class="header-cell">占比</div>
          <div class="header-cell">趋势</div>
        </div>
        
        <div class="table-body">
          <div class="table-row" v-for="(item, index) in tableData" :key="index">
            <div class="data-cell">
              <div class="indicator">
                <div class="color-marker" :style="{ backgroundColor: getColor(index) }"></div>
                {{ item.label }}
              </div>
            </div>
            <div class="data-cell">{{ item.value }}</div>
            <div class="data-cell">
              <div class="progress-container">
                <div 
                  class="progress-bar" 
                  :style="{ 
                    width: `${item.percentage}%`,
                    backgroundColor: getColor(index)
                  }"
                ></div>
                <span class="percentage">{{ item.percentage }}%</span>
              </div>
            </div>
            <div class="data-cell">
              <div class="trend" :class="item.trend">
                <i v-if="item.trend === 'up'" class="fas fa-arrow-up"></i>
                <i v-else-if="item.trend === 'down'" class="fas fa-arrow-down"></i>
                <span v-if="item.trend !== 'stable'">{{ item.change }}%</span>
                <span v-else>稳定</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="bar-chart" key="bar">
        <!-- 柱状图视图 -->
        <div class="chart-container">
          <div 
            v-for="(item, index) in tableData" 
            :key="index" 
            class="bar-item"
            :style="{ height: '100%' }"
          >
            <div class="bar-label">{{ item.label }}</div>
            <div class="bar-wrapper">
              <div 
                class="bar" 
                :style="{ 
                  height: `${(item.value / maxValue) * 100}%`,
                  backgroundColor: getColor(index),
                  animationDelay: `${index * 0.1}s`
                }"
              >
                <span class="bar-value">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted,computed, onBeforeUnmount  } from 'vue'
import axios from 'axios'

// 当前视图状态
const currentView = ref('table')
// 自动切换状态
const autoSwitch = ref(true)
let switchTimer = null

// 切换视图
const switchView = (viewType) => {
  if (viewType) {
    currentView.value = viewType
  } else {
    currentView.value = currentView.value === 'table' ? 'bar' : 'table'
  }
}

// 切换自动切换功能
const toggleAutoSwitch = () => {
  autoSwitch.value = !autoSwitch.value
  if (autoSwitch.value) {
    startAutoSwitch()
  } else if (switchTimer) {
    clearInterval(switchTimer)
    switchTimer = null
  }
}

// 启动自动切换
const startAutoSwitch = () => {
  if (switchTimer) {
    clearInterval(switchTimer)
  }
  switchTimer = setInterval(() => {
    switchView()
  }, 3000)
}

// 计算最大值用于柱状图比例
const maxValue = computed(() => {
  return Math.max(...tableData.value.map(item => item.value), 1)
})

// 初始化数据和自动切换
onMounted(() => {
  // 模拟API调用
  setTimeout(() => {
    dispatchData.value = {
      inStock: 1250,
      inbound: 2450,
      lost: 32,
      outbound: 2230,
      returns: 120
    }
    updateData()
  }, 500)
  
  // 启动自动切换
  startAutoSwitch()
})

// 清除定时器
onBeforeUnmount(() => {
  if (switchTimer) {
    clearInterval(switchTimer)
  }
})

// 响应式数据
const companyId = ref('')
const packageType = ref('')
const statType = ref('1') // 默认日统计
const dispatchData = ref(null)

// 快递公司数据
const companies = ref([
  { id: 1, name: '顺丰速运' },
  { id: 2, name: '京东物流' },
  { id: 3, name: '中通快递' },
  { id: 4, name: '圆通快递' },
  { id: 5, name: '韵达快递' },
])

// 表格数据
const tableData = ref([
  { label: '在库', value: 0, percentage: 0, trend: 'stable', change: 0 },
  { label: '入库', value: 0, percentage: 0, trend: 'stable', change: 0 },
  { label: '丢失', value: 0, percentage: 0, trend: 'stable', change: 0 },
  { label: '出库', value: 0, percentage: 0, trend: 'stable', change: 0 },
  { label: '退回', value: 0, percentage: 0, trend: 'stable', change: 0 }
])

// 汇总卡片数据
const summaryData = ref([
  { icon: 'fas fa-box-open', label: '在库包裹', value: 0 },
  { icon: 'fas fa-sign-in-alt', label: '今日入库', value: 0 },
  { icon: 'fas fa-sign-out-alt', label: '今日出库', value: 0 },
  { icon: 'fas fa-exclamation-triangle', label: '丢失包裹', value: 0 },
  { icon: 'fas fa-undo', label: '退回包裹', value: 0 }
])

// 获取派件数据
const fetchData = async () => {
  try {
    const response = await axios.get('/logistics/dispatchData', {
      params: {
        company: companyId.value,
        packageType: packageType.value,
        type: statType.value
      }
    })
    
    if (response.data.code === 200) {
      dispatchData.value = response.data.data
      updateData()
    }
  } catch (error) {
    console.error('获取派件数据失败:', error)
  }
}

// 更新数据
const updateData = () => {
  if (!dispatchData.value) return
  
  const data = dispatchData.value
  const total = data.inStock + data.inbound + data.lost + data.outbound + data.returns
  
  // 更新表格数据
  tableData.value[0].value = data.inStock
  tableData.value[1].value = data.inbound
  tableData.value[2].value = data.lost
  tableData.value[3].value = data.outbound
  tableData.value[4].value = data.returns
  
  // 计算百分比
  tableData.value.forEach(item => {
    item.percentage = total > 0 ? Math.round((item.value / total) * 100) : 0
  })
  
  // 模拟趋势数据
  tableData.value[0].trend = 'up'
  tableData.value[0].change = 5
  tableData.value[1].trend = 'down'
  tableData.value[1].change = 3
  tableData.value[2].trend = 'stable'
  tableData.value[3].trend = 'up'
  tableData.value[3].change = 12
  tableData.value[4].trend = 'down'
  tableData.value[4].change = 8
  
  // 更新汇总卡片
  summaryData.value[0].value = data.inStock
  summaryData.value[1].value = data.inbound
  summaryData.value[2].value = data.outbound
  summaryData.value[3].value = data.lost
  summaryData.value[4].value = data.returns
}

// 颜色生成函数
const getColor = (index) => {
  const colors = ['#00f2ff', '#1990ff', '#0b5bce', '#0a2dae', '#ff7d00']
  return colors[index % colors.length]
}

// 初始化
onMounted(() => {
  // 模拟API调用
  setTimeout(() => {
    dispatchData.value = {
      inStock: 1250,
      inbound: 2450,
      lost: 32,
      outbound: 2230,
      returns: 120
    }
    updateData()
  }, 500)
  
  // 实际应用时使用以下代码：
  // fetchData()
})
</script>

<style scoped>

.dispatch-data-container {
  width: 100%;
  height: 100%; /* 或者根据您的布局需要调整百分比 */
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.1); /* 半透明白色背景 */
  border-radius: 8px; /* 圆角 */
  padding: 15px; /* 适当的内边距 */
  box-sizing: border-box; /* 确保内边距不影响总尺寸 */
  overflow: hidden; /* 隐藏溢出内容 */
}



.header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 242, 255, 0.3);
}

.header h2 {
  color: #00f2ff;
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.5rem;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

.filters {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group label {
  font-size: 0.9rem;
}

.filter-group select {
  padding: 8px 12px;
  background: rgba(0, 30, 70, 0.7);
  border: 1px solid #00f2ff;
  border-radius: 4px;
  color: #fff;
  min-width: 120px;
  transition: all 0.3s;
}

.filter-group select:focus {
  outline: none;
  border-color: #00ff8c;
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

.data-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.card {
  background: rgba(79, 87, 97, 0.7);
  border-radius: 10px;
  display: flex;
  align-items: center;
  /* gap: 15px; */
  border: 1px solid rgba(0, 242, 255, 0.3);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 242, 255, 0.2);
  border-color: #00f2ff;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: hsl(var(--hue), 100%, 50%);
}

.icon {
  font-size: 1.8rem;
  color: hsl(var(--hue), 100%, 50%);
}

.content {
  flex: 1;
}

.value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.label {
  font-size: 0.9rem;
  color: #a0d1e5;
}

.data-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(0, 20, 50, 0.7);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(0, 242, 255, 0.3);
}

.table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  background: rgba(0, 30, 70, 0.9);
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 242, 255, 0.3);
}

.header-cell {
  /* padding: 15px 20px; */
  color: #00f2ff;
}

.table-body {
  overflow-y: auto;
  max-height: 100%;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  border-bottom: 1px solid rgba(0, 242, 255, 0.1);
  transition: background-color 0.3s;
}

.table-row:hover {
  background: rgba(0, 242, 255, 0.05);
}

.data-cell {
  padding: 10px 10px;
  display: flex;
  align-items: center;
}

.indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.progress-container {
  width: 100%;
  height: 25px;
  background: rgba(0, 242, 255, 0.1);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s;
}

.percentage {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.85rem;
  z-index: 2;
}

.trend {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.trend.up {
  color: #00ff8c;
  background: rgba(0, 255, 140, 0.1);
}

.trend.down {
  color: #ff7d00;
  background: rgba(255, 125, 0, 0.1);
}

.trend.stable {
  color: #00f2ff;
  background: rgba(0, 242, 255, 0.1);
}

/* 滚动条样式 */
.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-track {
  background: rgba(0, 20, 50, 0.3);
  border-radius: 10px;
}

.table-body::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 255, 0.5);
  border-radius: 10px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .filters {
    flex-direction: column;
    align-items: center;
  }
  
  .filter-group {
    width: 100%;
    max-width: 300px;
  }
  
  .summary-cards {
    grid-template-columns: 1fr;
  }
  
  .table-header, .table-row {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size: 0.85rem;
  }
  
  .header-cell, .data-cell {
    padding: 10px 15px;
  }
  
  .progress-container {
    height: 20px;
  }
}

@media (max-width: 480px) {
  .table-header, .table-row {
    grid-template-columns: 1fr 1fr;
  }
  
  .table-header div:nth-child(3),
  .table-header div:nth-child(4),
  .table-row div:nth-child(3),
  .table-row div:nth-child(4) {
    display: none;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

/* 柱状图容器 */
.bar-chart {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-container {
  display: flex;
  height: 90%;
  width: 95%;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-around;
}

.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  flex: 1;
  max-width: 80px;
}

.bar-label {
  font-size: 0.8rem;
  color: #a0d1e5;
  margin-bottom: 10px;
  text-align: center;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar-wrapper {
  height: calc(100% - 45px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  position: relative;
  animation: growBar 0.5s ease-out forwards;
  transform-origin: bottom;
  display: flex;
  justify-content: center;
}

.bar-value {
  position: absolute;
  top: -25px;
  font-size: 0.85rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

@keyframes growBar {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* 视图切换指示器 */
.view-indicator {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
  padding: 10px;
}

.view-indicator span {
  padding: 5px 15px;
  border-radius: 20px;
  cursor: pointer;
  background: rgba(0, 30, 70, 0.7);
  border: 1px solid rgba(0, 242, 255, 0.3);
  color: #fff;
  transition: all 0.3s;
}

.view-indicator span.active {
  background: rgba(0, 242, 255, 0.3);
  border-color: #00f2ff;
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

.view-indicator span:hover {
  background: rgba(0, 242, 255, 0.2);
}

.auto-toggle {
  background: rgba(255, 125, 0, 0.2) !important;
  border-color: #ff7d00 !important;
}

.auto-toggle:hover {
  background: rgba(255, 125, 0, 0.3) !important;
}

</style>       